<template>
  <el-container>
    <el-aside width="100%">
      <el-menu active-text-color="#ffd04b" background-color="rgba(65, 92, 133, 1)" class="el-menu-vertical-demo"
        default-active="2" router text-color="#fff">
        <template v-for="(item, index) in menunav" :key="index">
          <el-menu-item
            v-if="item.router"
            :index="item.index"
            :route="item.router">
            <el-icon><HomeFilled /></el-icon>
            <span>{{ item.main }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="item.index">
            <template #title>
              <el-icon>
                <Message />
              </el-icon>
              <span>{{ item.main }}</span>
            </template>
            <el-menu-item v-for="(item1, index1) in item.children" :key="index1" :index="item1.index"
              :route="item1.router">{{ item1.main }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-aside>
  </el-container>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: ["menunav"],
  setup(props) {
    var menu = ref([]);
    menu.value = props.menunav;
  },
};
</script>
<style scoped>
.el-container {
  min-width: 255px;
}
</style>
